<!doctype html>
<html lang="zh-cn" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <title>INSTAR-人工智能实验箱</title>
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon">
</head>
<link rel="stylesheet" href="../static/css/firstpage.css" th:href="@{/css/firstpage.css}">
<link rel="stylesheet" href="../static/css/header.css" th:href="@{/css/header.css}">
<body>


<!--------------------头部-begin------------------------------>
<header id="lk_header" th:replace="_fragments :: header(1)">
    <!--上部分-->
    <div class="top-bar d-none d-sm-none d-md-none d-lg-block text-center text-muted">
        <div class="container">
            <div class="row">
                <div class="top-bar-1 col-md-2">
                    <a href="" class="text-muted">
                        <i class="icon-phone"></i>
                        <span>关注微信号</span>
                        <img src="../static/images/ewm_lk.jpg" th:src="@{/images/ewm_lk.jpg}" alt="" style="width: 120px;">
                    </a>
                </div>
                <div class="top-bar-2 col-md-5">
                    <i class="icon-tel"></i>
                    <span>188-8888-8888（服务时间：9:00-21:00）</span>
                </div>
                <div class="top-bar-3 col-md-2">
                    <a href="#" class="text-muted">公司合作</a>
                </div>
                <div class="top-bar-4 col-md-3">
                    <a class="btn btn-lk btn-sm" href="/register" th:href="@{/register}">免费注册</a>
                    <a href="/login" class="ml-2 text-muted" th:href="@{/login}">立即登录</a>
                </div>
            </div>
        </div>
    </div>
    <!--下部分-->
    <nav class="navbar navbar-expand-lg navbar-light navbar-lk bg-light">
        <div class="container">
            <a class="navbar-brand d-flex justify-content-center align-items-center" href="#">
                <!--               <h2 class="mt-2 text-primary"><strong>INSTAR</strong></h2>-->
                <img src="../static/images/title.png" th:src="@{/images/title.png}" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#lk_nav"
                    aria-controls="lk_nav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="lk_nav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">产品中心<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" >视频教程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" >资料下载</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" >开源社区</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" >联系我们</a>
                    </li>
                </ul>
                <!--                <form class="form-inline pl-3 pr-3">-->
                <!--                    <div class="input-group">-->
                <!--                        <div class="input-group-prepend">-->
                <!--                            <span class="input-group-text" id="basic-addon1">帖子</span>-->
                <!--                        </div>-->
                <!--                        <input type="text" class="form-control" placeholder="请输入你要搜索的帖子" aria-label="search" aria-describedby="basic-addon1">-->
                <!--                    </div>-->
                <!--                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>-->
                <!--                </form>-->
            </div>
        </div>
    </nav>
</header>
<!--------------------头部-end------------------------------>

<!--------------------轮播图-begin------------------------------>
<section class="carousel slide">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active" data-interval="4000">
                <a href="">
                    <img src="../static/images/1.jpg" th:src="@{/images/1.jpg}" class="d-block w-100" alt="...">
                </a>

                <!--                <div class="carousel-caption d-none d-md-block">-->
                <!--                    <h5>First slide label</h5>-->
                <!--                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>-->
                <!--                </div>-->
            </div>
            <div class="carousel-item" data-interval="4000">
                <a href="">
                    <img src="../static/images/2.jpg" th:src="@{/images/2.jpg}" class="d-block w-100" alt="...">
                </a>

                <!--                <div class="carousel-caption d-none d-md-block">-->
                <!--                    <h5>Second slide label</h5>-->
                <!--                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>-->
                <!--                </div>-->
            </div>
            <div class="carousel-item" data-interval="4000">
                <a>
                    <img src="../static/images/3.jpg" th:src="@{/images/3.jpg}" class="d-block w-100" alt="...">
                </a>

                <!--                <div class="carousel-caption d-none d-md-block">-->
                <!--                    <h5>Third slide label</h5>-->
                <!--                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>-->
                <!--                </div>-->
            </div>
            <div class="carousel-item" data-interval="4000">
                <a href="">
                    <img src="../static/images/4.jpg" th:src="@{/images/4.jpg}" class="d-block w-100" alt="...">
                </a>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>
<!--------------------轮播图-end------------------------------>

<!--------------------公司资讯-begin------------------------------>
<section id="news">
    <div class="container-fluid list ">
        <div class="row justify-content-center align-items-center" style="background-color: #518BE1">
            <ul id="newslist" class="rowup  shadow-lg">
                <li class="news-list"><a class="news" href="">1月18日，人工智能视觉算法商城“极视角”宣布完成C1轮融资，此轮融资由北高峰资本与天奇创投合投，毅仁资本担任独家财务顾问。</a></li>
                <li class="news-list"><a class="news" href="">小程序文字上下滚动轮播效果实现CSS_机智的奎哥的博客-CSD..</a></li>
                <li class="news-list"><a class="news" href=""> 代码库 - CocoaChina_让移动开发更简单</a></li>
                <li class="news-list"><a class="news" href="">js、jQuery实现文字上下无缝轮播、滚动效果_个人文章 - Se...</a></li>
                <li class="news-list"><a class="news" href="">1月18日，人工智能视觉算法商城“极视角”宣布完成C1轮融资，此轮融资由北高峰资本与天奇创投合投，毅仁资本担任独家财务顾问。</a></li>
                <li class="news-list"><a class="news" href="">小程序文字上下滚动轮播效果实现CSS_机智的奎哥的博客-CSD..</a></li>
                <li class="news-list"><a class="news" href=""> 代码库 - CocoaChina_让移动开发更简单</a></li>
                <li class="news-list"><a class="news" href="">js、jQuery实现文字上下无缝轮播、滚动效果_个人文章 - Se...</a></li>
            </ul>
        </div>
    </div>
</section>
<!--------------------公司资讯-end------------------------------>

<!--------------------热门课程-begin------------------------------>
<section id="lk_hot">
    <!--标题-->
    <div class="text-center mt-3 mb-3">
        <h2><strong>热门课程</strong></h2>
        <img src="../static/images/star.png" th:src="@{/images/star.png}" alt="">
    </div>
    <!--内容-->
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-3">
                <div class="media d-flex align-items-center m-1 mb-3 bg-light p-2 course">
                    <div class="media-left mr-2">
                        <img src="../static/images/course12.png" th:src="@{/images/wzs.png}" alt="" class="media-object rounded-circle img-fluid img-thumbnail"
                             width="100">
                    </div>
                    <div class="media-body">
                        <h6 class="media-heading">
                            <span class="text-success">【新】</span>
                            Python 基础实训
                        </h6>
                        <p class="text-muted">
                            针对所有层次的Python学者手册
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="media d-flex align-items-center m-1 mb-3 bg-light p-2 course">
                    <div class="media-left mr-2">
                        <img src="../static/images/course22.png" th:src="@{/images/yjh.png}" alt="" class="media-object rounded-circle img-fluid img-thumbnail"
                             width="100">
                    </div>
                    <div class="media-body">
                        <h6 class="media-heading">
                            <span class="text-danger">【热】</span>
                            机器学习理论与实战
                        </h6>
                        <p class="text-muted">
                            10大模型全程驱动教学
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="media d-flex align-items-center m-1 mb-3 bg-light p-2 course">
                    <div class="media-left mr-2">
                        <img src="../static/images/course3.png" th:src="@{/images/yjh.png}" alt="" class="media-object rounded-circle img-fluid img-thumbnail"
                             width="100">
                    </div>
                    <div class="media-body">
                        <h6 class="media-heading">
                            <span class="text-warning">【战】</span>
                            深度学习理论与实战
                        </h6>
                        <p class="text-muted">
                            全面介绍深度学习各类神经网络
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="media d-flex align-items-center m-1 mb-3 bg-light p-2 course">
                    <div class="media-left mr-2">
                        <img src="../static/images/course4.png" th:src="@{/images/gxq.jpg}" alt="" class="media-object rounded-circle img-fluid img-thumbnail"
                             width="100">
                    </div>
                    <div class="media-body">
                        <h6 class="media-heading">
                            <span class="text-warning">【战】</span>
                            AI嵌入式应用实战
                        </h6>
                        <p class="text-muted">
                            AI应用开发就业实战第一篇
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--------------------热门课程-end------------------------------>



<!--------------------产品中心-begin------------------------------>
<section id="lk_product">
    <div class="container">
        <!--头部-->
        <div style="overflow: auto;">
            <ul class="nav nav-tabs" id="myTab" role="tablist">

                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
                       aria-selected="false">开源社区</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                       aria-selected="true">智能教学</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
                       aria-selected="false">课程体系</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
                       aria-selected="false">实验案例</a>
                </li>


            </ul>
        </div>
        <!--内容-->
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <!--第一部分-->
                            <div id="pd_one_1" class="mb-4 mt-4">
                                <a href="#"><img src="../static/images/ewm_lk.jpg" th:src="@{/images/ewm_lk.jpg}" alt="二维码" width="140"></a>
                                <div class="text-muted ml-2">
                                    <div>更多资讯欢迎</div>
                                    <div>关注 INSTAR</div>
                                </div>
                            </div>
                            <!--第二部分-->
                            <div id="pd_one_2" class="breadcrumb lead mb-4">
                                <strong>机器学习理论  +  嵌入式实战  +  深度学习实战</strong>
                            </div>
                            <!--第三部分-->
                            <h2 id="pd_one_3">
                                <strong>
                                    欢迎来到AI的开源社区
                                    <span class="text-danger">/</span>
                                    INSTAR
                                    <span class="text-danger">/</span>
                                </strong>
                            </h2>

                        </div>
                        <div class="col-md-6 mt-4">
                            <div id="pd_two_1">
                                <ul>
                                    <li><a href=""><span class="text-danger">2020-8-1</span>&nbsp;&nbsp;&nbsp;TB-16A-AI摄像机开发套件上手教程</a></li>
                                    <li><a href=""><span class="text-danger">2020-8-1</span>&nbsp;&nbsp;&nbsp;TB-16A-AI摄像机开发套件上手教程</a></li>
                                    <li><a href=""><span class="text-danger">2020-8-1</span>&nbsp;&nbsp;&nbsp;TB-16A-AI摄像机开发套件上手教程</a></li>
                                    <li><a href=""><span class="text-danger">2020-8-1</span>&nbsp;&nbsp;&nbsp;TB-16A-AI摄像机开发套件上手教程</a></li>
                                    <li><a href=""><span class="text-danger">2020-8-1</span>&nbsp;&nbsp;&nbsp;TB-16A-AI摄像机开发套件上手教程</a></li>
                                    <li><a href=""><span class="text-danger">2020-8-1</span>&nbsp;&nbsp;&nbsp;TB-16A-AI摄像机开发套件上手教程</a></li>
                                </ul>
                            </div>
                            <div class="pd_two_2" style="text-align: right">
                                <button class="btn btn-default btn-lg text-info" type="submit"> >>more </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <!--                            <img src="images/iphoneX2.png" alt="" class="img-fluid">-->
                        </div>
                        <div class="col-md-8">
                            <h1 class="text-warning mt-5">撩课学院会员</h1>
                            <p class="lead">汇聚名师, 为你呈现前端、后端、移动端、大数据、人工智能等从零基础到项目实战连载课程内容。专属的会员社群和私人订制服务,
                                1年365天持续更新课程紧跟前沿技术!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 pd-left">
                            <h1 class="mt-5">
                                <strong class="text-danger">
                                    案例驱动·体系贯穿·全面系统
                                </strong>
                            </h1>
                            <h3>
                                10-15分钟的视频
                                <span class="text-warning">知识点拆分讲解</span>
                            </h3>
                            <h4 class="text-muted" style="margin: 15px 0;">
                                玩转HTML5+全栈系列<br>
                                玩转Python+人工智能系列<br>
                                玩转JavaEE+大数据系列<br>
                            </h4>
                            <!--第四部分-->
                            <div>
                                <button class="btn btn-success btn-lg" type="submit" style="margin-right: 10px;">立即学习
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6 d-none d-sm-none d-md-none d-lg-block">
                            <!--                            <img src="images/macBook.png" th:src="@{images/macBook.png}" alt="" width="100%">-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--------------------产品中心-end------------------------------>

<!--------------------关于我们-begin------------------------------>
<section id="lk_about">
    <!--标题-->
    <div class="text-center mt-5 mb-5">
        <h2><strong>关于我们</strong></h2>
        <img src="../static/images/star.png" th:src="@{/images/star.png}" alt="">
    </div>
    <!--内容-->
    <div class="container">
        <div class="row mb-4">
            <div class="col-lg-8 order-2 order-lg-1">
                <p class="text-muted">
                    福建乐基科技有限公司成立于2016年,是一家致力于人工智能技术软硬件开发、教育服务的高科技企业。公司现有:博士6人，硕士33人，本科学历20人
                </p>
                <p class="text-muted">在来自中科院、清华大学、南京大学、新加坡南洋理工等科研机构的专家支持下,依托福建省科研院所的科技人才和科研平台,福建乐基科技有限公司形成了以技术注入为手段、以成果转化为目标的发展战略,推出了一系列领先的工智能技术,包括:视频图像、内容安全、人脸识别、视频图像分析检索、文本识别、机器人控制等</p>
                <p class="text-muted">开发并完善Python、嵌入式AI、机器学习、深度学习等极具竞争力的课程体系、教学实验箱产品。目前,公司团队拥有海内外专利10余项、计算机软件著作权登记百余项,累计承担国家及省部级项目百余项,在相关领域发表论文200余篇。</p>
                <p class="text-muted">
                    通过产学研用一体化发展路径,福建乐基科技致力于中国高科技成果的转化和产业化,履行“科教兴国、产业报国”的使命。</p>

            </div>
            <div class="col-lg-4 order-1 order-lg-1 mb-3  mb-lg-0">
                <img src="../static/images/welcome_img.jpg" th:src="@{/images/welcome_img.jpg}" class="img-fluid img-thumbnail" alt="">
            </div>
        </div>
    </div>
</section>
<!--------------------关于我们-end------------------------------>



<!--------------------尾部-begin------------------------------>

<footer id="lk_footer" th:replace="_fragments :: footer">
    <div class="container">
        <div class="row d-flex justify-content-between align-items-center">
            <div class="col-lg-8 d-none d-sm-none d-md-none d-lg-block">
                <div class="row  d-flex justify-content-center align-items-center">
                    <div class="col-lg-2">
                        <a href="">产品中心</a>
                    </div>
                    <div class="col-lg-2">
                        <a href="">视频教程</a>
                    </div>
                    <div class="col-lg-2">
                        <a href="">资料下载</a>
                    </div>
                    <div class="col-lg-2">
                        <a href="">开源社区</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 d-none d-sm-none d-md-block">
                <h6>联系我们:</h6>
                <a href=""><img src="../static/images/weixin-h.png" th:src="@{/images/weixin-h.png}" width="70" alt="" data-toggle="tooltip"
                                data-placement="bottom" title="weixin"></a>
                <a href=""><img src="../static/images/xinlang-h.png" th:src="@{/images/xinlang-h.png}" width="70" alt="" data-toggle="tooltip"
                                data-placement="bottom" title="weibo"></a>
            </div>
        </div>
    </div>
</footer>
<!--------------------尾部-end------------------------------>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="../static/js/jquery-3.3.1.js"></script>
<script src="../static/js/popper.js"></script>
<script src="../static/js/bootstrap.js"></script>
<!--/*/</th:block>/*/-->
<script src="../static/js/index.js" th:src="@{/js/index.js}"></script>
<script src="../static/js/bootstrap.bundle.js" th:src="@{/js/bootstrap.bundle.js}"></script>
<script type="text/javascript">
    $(function () {
        // 解决bootstrap下拉菜单第一次点击无反应问题
        $('.dropdown-toggle').dropdown();
    });

    // //图片懒加载
    // var imgs = document.querySelectorAll('img');
    //
    // //用来判断bound.top<=clientHeight的函数，返回一个bool值
    // function isIn(el) {
    //     var bound = el.getBoundingClientRect();
    //     var clientHeight = window.innerHeight;
    //     return bound.top <= clientHeight;
    // }
    // //检查图片是否在可视区内，如果不在，则加载
    // function check() {
    //     Array.from(imgs).forEach(function(el){
    //         if(isIn(el)){
    //             loadImg(el);
    //         }
    //     })
    // }
    // function loadImg(el) {
    //     if(!el.src){
    //         el.src = el.dataset.src;
    //     }
    // }
    // window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
    //     check();
    // };
    $(function(){
        $(".course").hover(function(){
            $(this).addClass("shadow-lg");
        },function(){
            $(this).removeClass("shadow-lg");
        })
    })

</script>
</body>
</html>